<template>
    <div>
        <panel title="账号列表">
            <el-table ref="multipleTable" style="width: 100%" :data="tableData"
                @selection-change="handleSelectionChange">

                <el-table-column type="selection" width="55"></el-table-column>

                <el-table-column prop="account" label="账号" width="300"></el-table-column>
                <el-table-column prop="userGroup" label="用户组" width="300"></el-table-column>
                <el-table-column prop="ctime" label="创建时间" width="300">
                    {{ formatData(tableData.ctime) }}
                    <!-- <template slot-scope="scope">
                        <span>{{ scope.row.ctiem | formatData }}</span>
                    </template> -->

                </el-table-column>
                <el-table-column prop="operation" label="操作" width="300">
                    <div slot-scope="scope">
                        <el-button size="mini" @click="clickEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </div>

                </el-table-column>
            </el-table>
            <el-dialog title="修改账户" :visible.sync="dialogFormVisible">

                <acclistsunit type="edit" :defaultdata="form" @success="success"></acclistsunit>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <!-- <el-button type="primary" @click="submit">确 定</el-button> -->
                </div>
            </el-dialog>
            <div class="block">
                <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="params.pageSize"
                    :current-page="params.currentPage" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @current-change="pageChange" @size-change="sizeChange">
                </el-pagination>
            </div>

            <div class="list-btn">
                <!-- v-if="userRole==1" round -->
                <el-button type="danger" @click="batchDelNotice()">批量删除</el-button>
                <el-button type="primary" @click="toggleSelection()">取消选择</el-button>
            </div>


        </panel>




    </div>
</template>

<script>
import axios from '@/utils/request';
import { batchdelReq, userseditReq } from '@/api/account.api';
import acclistsunit from './components/accountsunit.vue';

import dayjs from 'dayjs';
// ladash是一群工具函数
// import _ from 'lodash'
// 按需导入
import cloneDeep from 'lodash/cloneDeep'

export default {
    components: { acclistsunit },
    data() {
        return {
            // dialogTableVisible: false,
            dialogFormVisible: false,
            form: {},
            formLabelWidth: '120px',
            tableData: [],
            multipleSelection: [],
            params: {
                currentPage: 1,
                pageSize: 5
            },
            total: null,
            ids: ''
        }

    },

    created() {
        this.getData()
    },
    methods: {
        success(addForm) {
            console.log(addForm);
            userseditReq(addForm).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        message: '修改成功！',
                        type: 'success',
                    });
                    this.dialogFormVisible = false
                    this.getData()
                }
            })
        },
        // 修改账号
        clickEdit(row) {
            // this.form = row
            this.form = cloneDeep(row)
            // // console.log(this.form);
            this.dialogFormVisible = true
        },
        // 封装的axios
        getData() {
            axios.get('/users/list', {
                params: this.params
            }).then((res) => {
                this.tableData = res.data.data
                console.log(res);
                this.total = res.data.total
            })
        },
        pageChange(currentPage) {
            // 改变页码
            this.params.currentPage = currentPage
            // 重新调用getData
            this.getData()
        },
        sizeChange(pageSize) {
            // 改变页码
            this.params.pageSize = pageSize
            // 重新调用getData
            this.getData()
        },

        formatData(time) {
            return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
        },


        handleDelete(index, row) {
            this.$confirm('您是否确认删除该账号？', '删除提示', {
                confirmButtonText: '确定删除',
                cancelButtonText: '取消删除',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!',

                });
                axios.get('/users/del', {
                    params: {
                        id: row.id
                    }
                }).then((res) => {
                    this.getData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        // 修改时间
        // filters: {
        // formatData(time) {
        //     return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
        // }
        // formatData: function (time) {
        //     return dayjs(time).format('YYYY-MM-DD HH:mm:ss')

        // }
        // },
        // 批量删除
        batchDelNotice() {

            this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });

                batchdelReq(`[${this.ids.map(item => (item.id))}]`).then((res) => {
                    // console.log(ids);
                    this.getData()

                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

            // console.log()

        },
        handleSelectionChange(val) {
            // let time = val.map(item => (item.id))
            // console.log(time);
            this.ids = val
            // console.log(this.ids);

        },

        // 取消选择
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
    }
}
</script>

<style lang="less" scoped>
.list-btn,
.block {
    margin-top: 20px;
}
</style>
